import React, { Component } from 'react';
import { ScrollView, Text, Button } from 'react-native';
import { Scene, Actions } from 'react-native-router-flux';
import { observer } from 'mobx-react';
import store from './model';
import detail from '../models/customer';
import members from '../models/members';
import policies from '../models/policies';
import styles from './style';
import UserCard from './customerInfo/userCard';
import Info from './customerInfo/info';
import Entyies from './customerInfo/drawerEntries';
import RightBtn from './customerInfo/navBarRightBtn';
import FamilyEntry from './customerInfo/familyEntry';
import sceneStyle from '../../../components/navBarStyle';
import NavBarIconBtn from '../../../components/NavBarIconBtn';

@observer
class Detail extends Component {
  render() {
    return (
      <ScrollView style={styles.wrap}>
        <UserCard
          data={this.props.detail.customer}
          tags={this.props.store.tags}
        />
        <FamilyEntry
          members={this.props.members.total}
          policies={this.props.policies.total}
          customerId={this.props.customerId}
          customerName={this.props.detail.customer.name}
        />
        <Info data={{ ...this.props.detail.customer }} />
      </ScrollView>
    );
  }
}

module.exports = (
  <Scene
    key="customerDetailEntries"
    drawer
    contentComponent={() => <Entyies data={detail} />}
    drawerPosition="right"
    drawerWidth={192}
    hideDrawerButton
    hideNavBar
    hideTabBar
    back
  >
    <Scene
      key="customerDetail"
      initial
      component={
        (props) => <Detail
          {...props}
          store={store}
          detail={detail}
          members={members}
          policies={policies}
        />
      }
      title="客户详情"
      hideNavBar={false}
      path="/customerDetail/:id"
      {...sceneStyle}
      renderRightButton={
        <NavBarIconBtn
          title="操作"
          onPress={() => {
            Actions.drawerOpen();
          }}
          name="more-vertical"
        />
      }
      hideTabBar
      onEnter={(props) => {
        if (props.customerId) {
          detail.init(props.customerId);
        }
      }}
    />
  </Scene>
);
